<template>
    <div class="selectionRegistration-selectType-box" :class="!isMobile?'is-mobile-selectType-box':''">
        <div :class="!isMobile?'is-mobile-box-v-selectionRegistration':''">
            <div style="text-align: center;margin: 20px 0 10px 0;">
                <h3 style="font-weight: 600;font-size: 22px;">{{formState.fjhmc}}</h3>
            </div>
            <div style="text-align:center;">
                <a href="#" @click="getData">刷新</a>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: flex-start;height: 100vh;margin: 0 10px;" :key="selectTypeKey">
                <div class="stb-box" style="text-align: center;margin-top: 50px;">
                    <a-button class="selectType-btn-v" type="primary" :disabled="formState.fpxbmzt == '启用'?false:true" @click="applicationClick()">在线报名</a-button>
                    <div style="text-align: center;margin-top: 5px;" v-if="formState.djb && formState.djb.fsjcjzt == '已完成'">
                        <span style="color: #ed5565;">已报名</span>
                    </div>
                </div>
                <div class="stb-box" style="text-align: center;">
                    <a-button
                    class="selectType-btn-v"
                    type="primary"
                    :disabled="formState.fpxqdzt == '启用'?false:true"
                    @click="signInClick()">在线签到</a-button>

                    <a-spin tip="正在加载中..." :spinning="spinning" >
                        <div class="qd-box">
                            <div class="ad-for-box" v-for="(item,index) in qdccList" :key="index">
                                <!-- <div>
                                    <span>培训主题：{{ item.fcczt }}</span>
                                    <br/>
                                    <span>培训老师：{{ item.fccpxls }}</span>
                                    <br/>
                                    <span>培训场次：{{ item.fqdccbt }}</span>
                                    <br/>
                                    <div style="display: flex;">签&nbsp;&nbsp;到：
                                        <div v-if="item.fqdzt == '启用'">
                                            签到
                                            <a-checkbox
                                            :checked="item.fqdsj?true:false"

                                            :disabled="item.fqdsj?true:false"
                                            @change="onQdChange(item.id)">
                                                {{ item.fqdsj?'已签到':'未签到' }}
                                            </a-checkbox>
                                        </div>

                                        <span v-else>（未开始）</span>
                                    </div>
                                </div> -->
                                <span style="width: 50%;text-align: right;display: inline-block;">{{ item.fcczt+'/'+item.fqdccbt }}</span>
                                <div style="width: 50%;text-align: left;display: flex;">
                                    <span v-if="item.fqdzt == '启用'">&nbsp;&nbsp;</span>
                                    <div v-if="item.fqdzt == '启用'">
                                        签到
                                        <a-checkbox
                                        :checked="item.fqdsj?true:false"

                                        :disabled="item.fqdsj?true:false"
                                        @change="onQdChange(item.id)">
                                            <!-- {{ item.fqdsj?'已签到':'未签到' }} -->
                                        </a-checkbox>
                                    </div>
                                    <span v-else>（未开始）</span>
                                </div>

                            </div>
                        </div>
                    </a-spin>
                </div>
                <div class="stb-box" style="text-align: center;">
                    <a-button
                    class="selectType-btn-v"
                    type="primary"
                    :disabled="formState.fpxkszt == '启用' || formState.dcbState == '已完成'?false:true"
                    @click="evaluateClick()">在线评价</a-button>
                    <div style="text-align: center;margin-top: 5px;" v-if="formState.dcbState == '已完成'">
                        <span style="color: #ed5565;">已评价</span>
                    </div>
                </div>
                <div class="stb-box" style="text-align: center;">
                    <a-button
                    class="selectType-btn-v"
                    type="primary"
                    :disabled="formState.fpxkszt == '启用'?false:true"
                    @click="examinationClick()">在线考试</a-button>
                    <div style="text-align: center;margin-top: 5px;" v-if="formState.djb && formState.djb.fkstjzt == '已提交'">
                        <span style="color: #ed5565;">已考试</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Result } from 'ant-design-vue'
import {
    jcylxdjcjjhInfoById,
    jcylxdjcjlxjhPxqd,
    jcylxdjcjlxjhPxksks,
} from './service/index'
import { returnStart } from '../../administrativeOffice-new/applyFor/service'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            importantData:{
                id:'',
                flxjhid:'',
            },
            formState:{},
            qdccList:[],
            spinning:false,
            selectTypeKey:null,
            isMobile: false, // 默认为false表示PC端
        }
    },
    watch:{

    },
    mounted(){
        this.importantData.id = this.$route.query.id
        this.importantData.flxjhid = this.$route.query.flxjhid
        this.getData()
        window.removeEventListener('resize', this.checkDeviceType);
    },
    methods:{
        getData(){
            jcylxdjcjjhInfoById(this.importantData).then(res=>{
                if(res.code == 200){
                    this.formState = {...res.result.lxjh,djb:res.result.djb,dcbState:res.result.dcbState}
                    this.qdccList = res.result.qdccList
                    this.selectTypeKey = Date.now()
                    // fpxbmzt
                    // fpxqdzt
                    // fpxkszt
                }
            })
        },
        checkDeviceType() {
            if (window.innerWidth <= 768) {
                this.isMobile = true;
            } else {
                this.isMobile = false;
            }
        },
        onQdChange(id){//签到
            this.spinning = true
            let data = {
                flxjhid:this.importantData.flxjhid,
                flxqdccid:id,
                id:this.importantData.id,
            }
            jcylxdjcjlxjhPxqd(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData()
                this.spinning = false
            })
        },
        applicationClick(){
            var a = document.createElement('a');
            //a.target='_blank'
            a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+'selectionRegistrationInspectorInformationTable?stepNum='+2+
            '&id='+this.importantData.id+'&flxjhid='+this.importantData.flxjhid
            a.click();
        },
        signInClick(){

        },
        evaluateClick(){//评价
            var a = document.createElement('a');
            //a.target='_blank'
            a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'selectionRegistrationOnlineEvaluation?id='+this.importantData.id+'&flxjhid='+this.importantData.flxjhid
            a.click();
        },
        examinationClick(){
            let data = {
                flxjhid:this.importantData.flxjhid,
                id:this.importantData.id,
            }
            jcylxdjcjlxjhPxksks(data).then(res=>{
                if(res.code == 200){
                    var a = document.createElement('a');
                    //a.target='_blank'
                    a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'examinationPaper?id='+res.result.id+'&btn=1'
                    a.click();
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
    }
}
</script>
<style lang="less">
    .selectionRegistration-selectType-box{
        .stb-box{
            width: 100%;
            margin: 20px 0;
        }
        .selectType-btn-v{
            width: 50%;
            height: 45px !important;
            font-size: 18px;
        }
        .ant-btn-primary{
            border:1px solid #1ab394;
            background-color: #1ab394;
            color: #fff;
        }
        .ant-btn-primary:hover, .ant-btn-primary:focus{
            border:1px solid #1ab394;
            background-color: #1ab394;
            color: #fff;
        }
        .ant-btn-primary[disabled]{
            border:1px solid #a4adb3;
            background-color: #a4adb3;
            color: #fff;
        }
        .ant-btn-primary.disabled, .ant-btn-primary[disabled], .ant-btn-primary.disabled:hover, .ant-btn-primary[disabled]:hover, .ant-btn-primary.disabled:focus, .ant-btn-primary[disabled]:focus, .ant-btn-primary.disabled:active, .ant-btn-primary[disabled]:active, .ant-btn-primary.disabled.active, .ant-btn-primary[disabled].active{
            border:1px solid #a4adb3;
            background-color: #a4adb3;
            color: #fff;
        }
        .qd-box{
            .ad-for-box{
                display: flex;
                align-items: center;
                font-size: 18px;
                .ant-checkbox-wrapper{
                    font-size: 18px;
                }
                .ant-checkbox-inner{
                    border-color: #38f ;
                }
                .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{
                    border-color: #38f ;
                }
            }
            .ant-checkbox-disabled .ant-checkbox-inner{
                border-color:#38f !important;
                background-color: #fff;
            }
            .ant-checkbox-inner{
                border-color:#38f;
            }
            .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
                border-color:#38f;
            }
            .ant-checkbox-disabled + span{
                color:rgba(0, 0, 0, 0.65);
            }
        }
    }
    .is-mobile-selectType-box{
        display: flex;
        justify-content: center;
        background-color: #f0f2f5;
        .is-mobile-box-v-selectionRegistration{
            width: 500px;
            background-color: #fff;
            margin: 8px 0;
            height: calc(100vh - 16px);
            box-shadow: 0px 0px 11px rgba(158, 188, 229, 0.8);
        }
    }
</style>
